@import "../../../ng-tools-styles";

$colors: map_merge($theme-colors, $colors);
$defaultColor: map_get($colors, 'primary');

@mixin breadcrumb-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  &:hover {
    background-color: $hover-background !important;
    &:after {
      border-left: pxToRem(15px) solid $hover-background !important;
    }
    &:before {
      border-top: pxToRem(15px) solid $hover-background !important;
      border-bottom: pxToRem(15px) solid $hover-background !important;
    }
  }
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    background-color: $active-background !important;
    &:after {
      border-left: pxToRem(15px) solid $active-background !important;
    }
    &:before {
      border-top: pxToRem(15px) solid $active-background !important;
      border-bottom: pxToRem(15px) solid $active-background !important;
    }
  }
}

@mixin breadcrumb-color($value) {
  .breadcrumb-tail {
    color: $value !important;
  }
  .breadcrumb {
    .breadcrumb-item {
      background-color: $value !important;
      @include breadcrumb-variant($value, $value)
    }
    .breadcrumb-item:after {
      border-left: pxToRem(15px) solid $value !important;
    }
    .breadcrumb-item + .breadcrumb-item {
      @include breadcrumb-variant($value, $value)
    }
    .breadcrumb-item + .breadcrumb-item:before {
      border-top: pxToRem(15px) solid $value !important;
      border-bottom: pxToRem(15px) solid $value !important;
    }
  }
}

.breadcrumb-wrap {
  position: relative;
  margin-left: pxToRem(-15px);
  user-select: none;
  .breadcrumb-tail {
    position: absolute;
    left: pxToRem(2px);
    color: $defaultColor;
    transform: rotate(-45deg);
    line-height: pxToRem(55px);
  }
  .breadcrumb {
    background: inherit;
    height: pxToRem(55px);
    margin-bottom: 0;
    .breadcrumb-item {
      position: relative;
      display: flex;
      justify-content: center;
      cursor: pointer;
      align-items: center;
      background-color: $defaultColor;
      padding: pxToRem(5px) pxToRem(15px) pxToRem(5px) pxToRem(15px);
      color: #fff;
      height: pxToRem(30px);
      border: none;
      a {
        color: #fff;
        text-decoration: none;
      }
    }

    .breadcrumb-item.active {
      background-color: #999999;
      &:after {
        border-left: pxToRem(15px) solid #999999;
      }
    }

    .breadcrumb-item + .breadcrumb-item {
      margin-left: pxToRem(30px);
    }
    .breadcrumb-item:after {
      position: absolute;
      top: 0;
      right: pxToRem(-15px);
      content: "";
      border-top: pxToRem(15px) solid transparent;
      border-left: pxToRem(15px) solid $defaultColor;
      border-bottom: pxToRem(15px) solid transparent;
    }

    .breadcrumb-item + .breadcrumb-item:before {
      position: absolute;
      top: 0;
      left: pxToRem(-23px);
      content: "";
      border-top: pxToRem(15px) solid $defaultColor;
      border-left: pxToRem(15px) solid transparent;
      border-bottom: pxToRem(15px) solid $defaultColor;
    }

    .breadcrumb-item + .breadcrumb-item.active {
      &:before {
        border-top: pxToRem(15px) solid #999;
        border-bottom: pxToRem(15px) solid #999;
      }
    }
  }
}
